<template>
  <div class="container">
    <!-- 查询区 -->
    <div class="flex gap-2 mt-1 justify-around mb-1">
      <div>
        <span style="margin-right: 10px">员工ID</span>
        <el-input v-model="userId" placeholder="请输入员工ID" style="width: 240px"></el-input>
      </div>
      <!-- <div>
        <span>请假开始时间</span>
        <el-date-picker v-model="leaveStartTime" type="date" placeholder="选择开始时间" format="YYYY-MM-DD"
          style="width: 240px" />
      </div>
      <div>
        <span>请假结束时间</span>
        <el-date-picker v-model="leaveEndTime" type="date" placeholder="选择结束时间" format="YYYY-MM-DD"
          style="width: 240px" />
      </div> -->
      <div>
        <span style="margin-right: 10px">审批状态</span>
        <el-select v-model="status" placeholder="审批状态" style="width: 240px">
          <el-option label="待审批" value="0"></el-option>
          <el-option label="已批准" value="1"></el-option>
          <el-option label="已拒绝" value="2"></el-option>
          <el-option label="所有" value="3"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" :prefix-icon="Search" @click="search">
          <el-icon>
            <Search />
          </el-icon>查询
        </el-button>
        <el-button type="primary" :prefix-icon="Refresh" @click="reset">
          <el-icon>
            <Refresh />
          </el-icon>
          重置
        </el-button>
      </div>
    </div>

    <!-- 操作区 -->
    <!-- <div class="m-1">
      <el-button type="primary" plain @click="dialogAdd = true">新增请假</el-button>
    </div> -->

    <!-- 请假记录表格 -->
    <div class="pl-2">
      <el-table :data="paginatedData" style="width: 100%; height: 460px;">
        <el-table-column prop="userId" label="员工ID" width="120" />
        <el-table-column prop="leaveStartTime" label="请假开始时间" width="120" />
        <el-table-column prop="leaveEndTime" label="请假结束时间" width="120" />
        <el-table-column prop="leaveReason" label="请假事由" width="200" />
        <el-table-column prop="leaveTypeCode" label="请假类型" width="120" />
        <el-table-column prop="approveContent" label="审批意见" width="200" />
        <el-table-column prop="status" label="审批状态" width="100" :formatter="formatStatus" />
        <el-table-column label="操作" min-width="150">
          <template #default="{ row }">
            <!-- <el-button link type="primary" size="small" @click="handleClick(row)">修改</el-button> -->
            <el-button link type="primary" size="small" @click="deleteLea(row.id)">删除</el-button>
            <el-button link type="primary" size="small" @click="change(row, 2)" :disabled="row.status===2 || row.status===3 ? true : false">审批通过</el-button>
            <el-button link type="primary" size="small" @click="change(row, 3)" :disabled="row.status===2 || row.status===3 ? true : false">拒绝通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background layout="sizes, prev, pager, next" :total="total" :current-page="currentPage"
        :page-size="pageSize" @size-change="handleSizeChange" @current-change="handlePageChange" />
    </div>
  </div>

  <!-- 添加请假记录弹窗 -->
  <el-dialog v-model="dialogAdd" title="添加请假记录">
    <el-form label-width="120px" class="text-center pt-1 gap-1 items-center justify-center">
      <el-form-item label="员工ID">
        <el-input v-model="leaveAdd.userId" placeholder="请输入员工ID" />
      </el-form-item>
      <el-form-item label="请假开始时间">
        <el-date-picker v-model="leaveAdd.leaveStartTime" type="date" placeholder="选择开始时间" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="请假结束时间">
        <el-date-picker v-model="leaveAdd.leaveEndTime" type="date" placeholder="选择结束时间" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="请假事由">
        <el-input v-model="leaveAdd.leaveReason" placeholder="请输入请假事由" />
      </el-form-item>
      <el-form-item label="请假类型">
        <el-input v-model="leaveAdd.leaveTypeCode" placeholder="请输入请假类型" />
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="leaveAdd.status" placeholder="审批状态">
          <el-option label="待审批" value="0"></el-option>
          <el-option label="已批准" value="2"></el-option>
          <el-option label="已拒绝" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogAdd = false">取消</el-button>
        <el-button type="primary" @click="addLeaveRecord">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogBecause" title="审批意见">
    <el-input v-model="leaveChange.approveContent" placeholder="拒绝原因" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogBecause = false">取消</el-button>
        <el-button type="primary" @click="sendReason">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改请假记录弹窗 -->
  <!-- <el-dialog v-model="dialogChange" title="修改请假记录">
    <el-form label-width="120px" class="text-center pt-1 gap-1 items-center justify-center">
      <el-form-item label="员工ID">
        <el-input v-model="leaveChange.userId" placeholder="请输入员工ID" />
      </el-form-item>
      <el-form-item label="请假开始时间">
        <el-date-picker v-model="leaveChange.leaveStartTime" type="date" placeholder="选择开始时间" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="请假结束时间">
        <el-date-picker v-model="leaveChange.leaveEndTime" type="date" placeholder="选择结束时间" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="请假事由">
        <el-input v-model="leaveChange.leaveReason" placeholder="请输入请假事由" />
      </el-form-item>
      <el-form-item label="请假类型">
        <el-input v-model="leaveChange.leaveTypeCode" placeholder="请输入请假类型" />
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="leaveChange.status" placeholder="审批状态">
          <el-option label="待审批" value="0"></el-option>
          <el-option label="已批准" value="2"></el-option>
          <el-option label="已拒绝" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogChange = false">取消</el-button>
        <el-button type="primary" @click="changeLeave">确定</el-button>
      </span>
    </template>
  </el-dialog> -->
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { Refresh, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getLeaveList, addLeave, deleteLeave, pendLeave, updateLeave, getLeaveById } from '@/api';
import EmpLeaveRecord from './type';
import { useUserStore } from '@/store';
import dayjs from 'dayjs';
import { log } from 'console';
const userStore = useUserStore();

const leaveAdd = ref<EmpLeaveRecord>({
  userId: undefined,
  leaveStartTime: '',
  leaveEndTime: '',
  leaveReason: '',
  leaveTypeCode: '',
  status: 0,
});

const leaveChange = ref<EmpLeaveRecord>({
  id: undefined,
  userId: undefined,
  leaveStartTime: '',
  leaveEndTime: '',
  leaveReason: '',
  leaveTypeCode: '',
  status: 0,
  approveContent: '',
  approveUserId: userStore.id,
  approveTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
});

const dialogBecause = ref(false);
const userId = ref('');
const leaveStartTime = ref('');
const leaveEndTime = ref('');
const status = ref<string | null>(null);
const dialogChange = ref(false);
const dialogAdd = ref(false);
const cloneData=ref<EmpLeaveRecord[]>([]);
const tableData = ref<EmpLeaveRecord[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const paginatedData = ref<EmpLeaveRecord[]>([]);
const formatStatus = (row: any, column: any, cellValue: number, index: number) => {
  switch (cellValue) {
    case 0:
      return '待审批';
    case 2:
      return '已批准';
    case 3:
      return '已拒绝';
    default:
      return '未知状态';
  }
};

const init=()=>{
  getLeaveList().then((res) => {
    tableData.value = res.data.data;
    cloneData.value = res.data.data;
    total.value = res.data.data.length;
    updateTableData();
  });
}
onMounted(() => {
  init();
});

const updateTableData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedData.value = tableData.value.slice(start, end);
};

const addLeaveRecord = () => {
  addLeave(leaveAdd.value).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('添加成功');
    } else {
      ElMessage.error('添加失败');
    }
  });
};

const sendReason = () => {
  updateLeave({
    ...leaveChange.value,
  }).then((res) => {
    console.log(res);
    getLeaveList().then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.data.length;
    updateTableData();
  });
    dialogBecause.value = false;
  })
}

// 通过审批
const change = (data, num) => {
  if (num === 3) {
    dialogBecause.value = true;
    leaveChange.value = { ...data, status: 3, approveUserId: userStore.id };
    console.log(leaveChange.value);
  }
  else {
    console.log(data);
    data.status = num;
    updateLeave({
      ...data,
    }).then((res) => {
      if (res.data.code === 200 && num === 2) {
        ElMessage.success({
          message: '审批通过成功',
          type: 'success',
        });
      }
    })
  }

}

const handlePageChange = (page: number) => {
  currentPage.value = page;
  updateTableData();
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  updateTableData();
};

watch(() => tableData.value, () => {
  total.value = tableData.value.length;
  updateTableData();
});

const handleClick = (data: EmpLeaveRecord) => {
  dialogChange.value = true;
  leaveChange.value = { ...data };
};
const search = () => {

  if(status.value === '0'){
    tableData.value = cloneData.value.filter((item) => item.status === 0);
}else if(status.value === '1'){
    tableData.value = cloneData.value.filter((item) => item.status === 2);
}else if(status.value === '2'){
    tableData.value = cloneData.value.filter((item) => item.status === 3);
}else{
  init();
}
}


const reset = () => {
  userId.value = '';
  status.value = null;
}

const deleteLea = (id: number) => {
  deleteLeave(id).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('删除成功');
      init();
    } else {
      ElMessage.error('删除失败');
    }
  });
};
</script>

<style lang="less" scoped>
/* Add your styles here */
</style>
